import React, { useState, useEffect, useCallback } from 'react';
import { postAccAmoebaCostFindAmoebaCostDetail } from '../../../../financialApi';
import { message, Modal, Table } from 'antd';

const DetailedModule = ({ detailedModuleShow, setDetailedModuleShow, clickId }) => {
    const [detailsListData, setDetailsListData] = useState([]);
    const [pagingData, setPagingData] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const detailsListFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            parames.id = clickId;
            ; (async () => {
                const { code, msg, data } = await postAccAmoebaCostFindAmoebaCostDetail(parames)
                if (code === '20000') {
                    setDetailsListData(data.records);
                    setPagingData({
                        currentPage: parames.currentPage,
                        size: parames.size,
                        total: data.total
                    });
                } else {
                    message.error(msg);
                }
            })();
        },
        [clickId],
    )
    useEffect(() => {
        detailsListFun();
    }, [detailsListFun])
    const handleOk = () => {
        setDetailedModuleShow(false);
    };
    const handleCancel = () => {
        setDetailedModuleShow(false);
    };
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${pagingData.total}条`,
        //每页条数
        pageSize: pagingData.size,
        //当前页数
        current: pagingData.currentPage,
        //数据总数
        total: pagingData.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun
        }
        detailsListFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: pagingData.size
        }
        detailsListFun(parames);
    }
    const columns = [
        {
            title: '日期',
            align: 'center',
            dataIndex: 'shareDate'
        },
        {
            title: '部门',
            align: 'center',
            dataIndex: 'shareDepName'
        },
        {
            title: '人员',
            align: 'center',
            dataIndex: 'shareUserName'
        },
        {
            title: '分摊金额',
            align: 'center',
            dataIndex: 'shareMoney'
        }

    ];
    return (
        <Modal
            title="明细"
            visible={detailedModuleShow}
            onOk={handleOk}
            onCancel={handleCancel}
            footer={false}
        >
            <Table size='small' dataSource={detailsListData} columns={columns} rowKey='id' pagination={pagination} />
        </Modal>
    )
}

export default DetailedModule;